<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .title {
            line-height: 40px;
        }

        .list {
            margin-top: 20px;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <button class="addEle">新增元素</button>
        <button class="addText">新增文本</button>
        <button class="addComment">新增注释</button>
        <ul class="list one">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>
    // 节点的新增
    // 元素节点(为主)  文本节点  注释节点


    // document.createElement(tagName)   根据传入的标签名,创建一个元素(节点) ,返回被创建的元素 
    // document.createTextNode(string)   根据传入的文本,创建一个文本节点 ,返回被创建的文本节点 
    // document.createComment(string)   根据传入的文本,创建一个注释节点 ,返回被创建的文本节点 
    // 被创建的节点,默认存储在内存当中, 只有放到页面中,才能生效


    // 将节点放到页面中的方法

    // 1. 放到父元素中  append => 追加 => 父元素所有内容的最后方  prepend=> 预追加 =>   父元素所有内容的最前方  (由父元素统筹)
    // parent.appendChild(node)      向匹配的父元素中追加一个节点(元素节点|文本节点|注释节点)   
    // parent.append(node|string)    向匹配的父元素中追加一个节点/文本(如果传入文本,会被替换为对应的文本节点) 

    // parent.prepend(node | string)    向匹配的父元素中追加一个节点 / 文本(如果传入文本, 会被替换为对应的文本节点)



    var list = document.querySelector(".list");

    var addEle = document.querySelector(".addEle");
    var addText = document.querySelector(".addText");
    var addComment = document.querySelector(".addComment");

    // 点击新增按钮 创建一个元素(li)放到.list中 
    // 1. 创建一个元素(li)  
    // 2. 放到.list中 
    addEle.onclick = function () {
        // 创建元素节点
        var li = document.createElement("li");
        console.log(li);

        // li.innerText = "我是新增的li";
        var text = document.createTextNode("我是新增的li");
        li.appendChild(text);

        li.setAttribute("class", "newLi");
        li.style.backgroundColor = "red";
        li.onclick = function () {
            console.log(this.innerText);// this -> 绑定事件的元素 -> 新增的li
        }
        // list.append(li);  // 添加一个新的节点 => 放到父元素所有内容的最后方
        list.append(list.firstElementChild);
    }


    // 点击新增按钮 创建一个文本节点放到.list中 
    addText.onclick = function () {
        var text = document.createTextNode("这是新增的文本");
        console.log(text);
        list.appendChild(text);
    }

    addComment.onclick = function () {
        var comment = document.createComment("我是注释的内容");
        console.log(comment);
        list.appendChild(comment);
    }





</script>

</html>